<script setup lang='ts'>
import { ref } from 'vue';
// 定义一个响应式变量来跟踪是否处于全屏状态
const isFullscreen = ref(false);
const Fullscreen = () => {
    /* var element = document.getElementById('app');*/
    var element = document.getElementById('app');
    if (!document.fullscreenElement) {
        if (element.requestFullscreen) {
            element.requestFullscreen();
        } else if (element.mozRequestFullScreen) { /* Firefox */
            element.mozRequestFullScreen();
        } else if (element.webkitRequestFullscreen) { /* Chrome, Safari and Opera */
            element.webkitRequestFullscreen();
        } else if (element.msRequestFullscreen) { /* IE/Edge */
            element.msRequestFullscreen();
        }
        // 进入全屏后更新状态
        isFullscreen.value = true;
    } else {
        if (document.exitFullscreen) {
            document.exitFullscreen();
        } else if (document.mozCancelFullScreen) { /* Firefox */
            document.mozCancelFullScreen();
        } else if (document.webkitExitFullscreen) { /* Chrome, Safari and Opera */
            document.webkitExitFullscreen();
        } else if (document.msExitFullscreen) { /* IE/Edge */
            document.msExitFullscreen();
        }
        // 退出全屏后更新状态
        isFullscreen.value = false;
    }
}
</script>

<template>
    <div class="footer" style="background-image: url('/footer.png'); 
           width: 100%; 
           height: 60px;
           background-size: cover;">
        <button><router-link to="/">首页</router-link></button>
        <button><router-link to="/tree">模型树</router-link></button>
        <button><router-link to="/label">标记管理</router-link></button>
        <button><router-link to="/multiview">视角管理</router-link></button>
        <button><router-link to="/menu">菜单示例</router-link></button>
        <button><router-link to="/roam">漫游示例</router-link></button>
        <button><router-link to="/search">POI查询</router-link></button>
        <button @click="Fullscreen()"><router-link to="">{{ isFullscreen ? '退出全屏' : '全屏' }}</router-link></button>
    </div>

</template>

<style scoped>
.footer {
    width: 100%;
    height: 50px;
    /* background-color: #2aa5d656; */
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 2;
    display: flex;
    justify-content: center;
    align-items: center;
}
</style>
